<script lang="ts" setup>
import { useImage } from "@/hooks/useImage";
import { usePageStore } from "@/store";
import { defineComponent } from "vue";
const current = (value: number) => {
  currentValue.value = value;
};
const route = useRoute();
const page = usePageStore();
const list = ref<any[]>([]);
const width = ref();
const height = ref();
const load = ref(true);
// (route.params.c as string) ??
const search = ref((route.query.c as string) ?? "");
const currentValue = ref(page.page.currentPage ?? 1);
watch(
  [currentValue, search],
  async ([newCurrent, newSearch]) => {
    page.setCurrentPage(newCurrent);
    if (route.query.c) {
      page.setCurrentPage(1);
    }
    page.setSearch(newSearch);
    const { imgInfo, computedHeight, computedWidth, loading } = await useImage(
      page.page.currentPage,
      10,
      page.page.search
    );
    list.value = imgInfo.value;
    width.value = computedWidth.value;
    height.value = computedHeight.value;
    load.value = loading.value;
  },
  {
    immediate: true,
    flush: "post",
  }
);
// const child = () => import("./PicxGraph.vue");
// child().then((res: any) => {
//   console.log(res.default.render());
// });
// const child
// useCache(page.page.currentPage, );
</script>
<template>
  <div id="container">
    <section>
      <PicxHeader
        @search="(val: string) => (search = val)"
        v-if="!route.query.c"
      />
      <div v-else>
        <el-check-tag checked type="success">
          {{ route.query.c }}
        </el-check-tag>
      </div>
      <main>
        <PicxLoading v-if="load" />
        <div v-else>
          <PicxGraph :list="list" :width="width" :height="height" />
          <PicxPageFooter @current="current" />
        </div>
      </main>
      <el-backtop :right="100" :bottom="100" />
    </section>
  </div>
</template>
<style lang="scss" scoped>
main {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: auto;
}
</style>
